<template>
  <div>
      <!--  -->
      <div>
        <div class="qr-btn" node-type="qr-btn">
            扫描二维码1
            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
        </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <!--第二  -->
    <div>
        <div class="qr-btn" node-type="qr-btn">扫描二维码2
            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码2" />
        </div>
    </div>
    <!-- 第三 -->
    <div class="van-cell van-field bg-Percolor2" >
        <div class="van-cell__title van-field__label">
            <span>设备编号</span>
        </div>
        <div class="van-cell__value van-field__value" style="text-align: left;">
            <div class="van-field__body qr-btn" node-type="qr-btn">
                <div v-show="!watchInfo">{{result}}</div>   
                <div class="van-field__right-icon " style="position: absolute;right: 0px;top: 50%;margin-top: -12px;">
                    <i class="iconfont icon-camera2"></i>
                </div>
                <input v-show="false" @change="changeInfo" type="file" placeholder="点击输入" name="myPhoto" class="van-field__control " node-type="jsbridge" >
                
            </div>
        </div>
    </div>

    <!-- 结果 -->
    <div v-if="false" class="result-qrcode" ref="result">123
    </div>
  </div>
</template>

<script>
import * as zepto from "../util/zepto"
import * as qrcodeMin from "../util/qrcode.lib.min.js"
import * as qrcode from "../util/qrcode"
export default {
    data(){
        return{
            watchInfo:false,
            result:'',
        }
    },
    methods:{
        initData(){
            Qrcode.init($('[node-type=qr-btn]'));
        },
        changeInfo(){
            console.log("改变")
            setTimeout(() => {
                this.result = sessionStorage.getItem('results')
                if(this.result == 'error decoding QR Code'){
                    this.result= '重新识别'
                    console.log("重新识别")
                }
            }, 100);

        }
        
    },
    mounted(){
        this.initData();
        
        console.log(this.$refs.result.innerHTML)

    },
    computed:{
        resultReturn:function(){
            return this.$refs.result
        }
        
    },
    watch:{
        // 'this.$refs.result.innerHTML'(val){
        //     console.log("翻牌子")
        //     console.log(val)
        // },
        // 'resultReturn.innerHTML'(val,oldVal){
        //      console.log("翻牌子1")
        //     console.log(val , oldVal)
        // },
        // resultA(val,oldVal){
        //     console.log("翻牌子")
        //     console.log(val)
        // }
    }
}
</script>
 
<style>

</style>